import src from "../../static/images/u6153.png";
import './Park_equipment.scss'
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { Image, Switch } from 'antd';
//第一个环形图
const option1 = {
    chart: {
        type: 'pie',
        height: 200,
        width: 300,
    },
    title: {
        text: ''
    },
    colors: [
        '#3BA1FF',
        '#37CBCB',
        '#4FCB74',
        '#FBD438',
        '#F2647C'
    ],
    tooltip: {
        enabled: false
    },
    plotOptions: {
        enabled: true,
        pie: {
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
        type: 'pie',
        innerSize: '60%',
        data: [
            ['', 40],
            ['', 21],
            ['', 17],
            ['', 13],
            ['', 9]
        ]
    }]
}
//第二个曲线图
const option2 = {
    chart: {
        type: "areaspline",
        height: 200,
        width: 300,
    },
    credits: {
        enabled: false,
    },
    title: {
        text: "",
    },

    legend: {
        enabled: false, //不显示图例
        layout: "vertical",
        align: "left",
        verticalAlign: "top",
        x: 10,
        y: 10,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
            "#FFFFFF",
    },
    xAxis: {
        categories: [
            "11/20",
            "11/22",
            "11/24",
            "11/26",
            "11/28",

        ],
    },
    yAxis: {
        title: {
            text: "",
        },
        // tickInterval: "20px",
    },
    tooltip: {
        shared: true,
        valueSuffix: " 单位",
    },
    plotOptions: {
        areaspline: {
            fillOpacity: 0.5,
        },
    },
    series: [
        {
            data: [100, 190, 600, 690, 900, 800, 170, 150, 190, 300, 210],
        },
    ],
};

const Chart1 = () => (
    <div>
        <HighchartsReact highcharts={Highcharts} options={option1} />
    </div>
);
const Chart2 = () => (
    <div>
        <HighchartsReact highcharts={Highcharts} options={option2} />
    </div>
);


const Park_equipment = () => {
    const bgGround = {
        backgroundImage: "url(" + src + ")", //图片的路径
    };

    return (
        <div className="box">
            <div style={bgGround} id="cont">
                <div id="left">
                    <div id="first">
                        <span className="title">设备资产数量</span>
                        <div className="line"></div>
                        <div id="center">
                            <span className="yellow">1500</span>
                            <div className="line2"></div>
                            <span className="gray">设备数量总数（件）</span>
                        </div>
                        <Chart1 />
                        <div id="items">
                            <div className="item">
                                <span className="green"></span>
                                <span>供配电</span>
                            </div>
                            <div className="item">
                                <span className="blue"></span>
                                <span>供排水</span>
                            </div>
                            <div className="item">
                                <span className="ye"></span>
                                <span>暖通</span>
                            </div>
                            <div className="item">
                                <span className="red"></span>
                                <span>供热</span>
                            </div>

                        </div>

                    </div>

                    <div id="second">
                        <span className="title">供配电设备运行情况</span>
                        <div className="line"></div>
                        <div className="tou">
                            <p>用电总功率(W)</p>
                            <p>总负载率(%)</p>
                        </div>
                        <div className="zi">
                            <p>3000<span> W </span></p>
                            <p>100<span>% </span> </p>
                        </div>
                        <Chart2 />

                    </div>
                    <div id="third">
                        <span className="title">夜景照明</span>
                        <div className="line"></div>
                        <div className="top">
                            <Image
                                style={{ width: '50px', height: '50px', marginRight: '20px' }}
                                src="https://cdn3.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png" />
                            <div className="deng">
                                <span >景灯1</span>
                                <Switch defaultChecked />
                            </div>
                            <Image
                                style={{ width: '50px', height: '50px', marginRight: '20px', marginLeft: '35px' }}
                                src="https://cdn3.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png" />
                            <div className="deng">
                                <span>景灯2</span>
                                <Switch defaultChecked />
                            </div>
                        </div>
                        <div className="top">
                            <Image
                                style={{ width: '50px', height: '50px', marginRight: '20px' }}
                                src="https://cdn3.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png" />
                            <div className="deng">
                                <span >景灯3</span>
                                <Switch defaultChecked />
                            </div>
                            <Image
                                style={{ width: '50px', height: '50px', marginRight: '20px', marginLeft: '35px' }}
                                src="https://cdn3.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6259.png" />
                            <div className="deng">
                                <span>景灯4</span>
                                <Switch defaultChecked />
                            </div>
                        </div>

                    </div>
                </div>



                <div id="right">
                    <div id="one">
                        <span className="title2">供水系统</span>
                        <div className="line3"></div>
                        <div className="shuichi">
                            <p>生活水池</p>
                            <p>消防水池</p>
                            <p>高位水箱</p>
                        </div>
                        <div className="zi">
                            <span>3.1</span>
                            <span>2.6</span>
                            <span>4.5</span>
                        </div>
                        <div className="biaotou">
                            <span>设备名称</span>
                            <span>储水量</span>
                            <span>发生时间</span>
                        </div>
                        <div className="line4"></div>
                        <div className="none"></div>
                    </div>
                    <div id="two">
                        <span className="title2">监控系统</span>
                        <div className="line3"></div>
                        <Image
                            style={{ marginBottom: '15px' }}
                            src="https://cdn3.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E9%A9%BE%E9%A9%B6%E8%88%B1/u5546.png" />

                    </div>
                    <div id="three">
                        <span className="title2">供暖系统</span>
                        <div className="line3"></div>
                        <span style={{ color: 'white', fontWeight: 'bolder', fontSize: '25px', position: 'relative', top: '60px', left: '60px' }}>45%</span>
                        <span style={{ color: 'white', fontWeight: 'bolder', position: 'relative', top: '120px', left: '5px', zIndex: '1' }}>供暖压力</span>
                        <div style={{
                            display: 'flex',
                            justifyContent: 'space-between'
                        }}>
                            <div className="tu">
                                <Image src="https://cdn3.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6390.svg"></Image>
                                <Image
                                    style={{ position: 'relative', top: '-100px', left: '0' }}
                                    src="https://cdn3.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%AE%BE%E5%A4%87%E5%88%86%E6%9E%90/u6388.svg"
                                ></Image>
                            </div>
                            <div style={{display:'flex',flexDirection:' column'}}>
                                <div>
                                    <span style={{ color: '#FFE400',marginRight:'25px' }}>设备名称</span>
                                    <span style={{ color: '#FFE400' }}>设备状态</span>
                                </div>
                                <div className="neirong">
                                    <span style={{ color: 'white',marginRight:'15px'}}>A1楼地暖设备</span>
                                    <span style={{ color: '#95F204' }}>正常</span>
                                </div>
                                <div className="neirong">
                                    <span style={{ color: 'white',marginRight:'15px'}}>A2楼地暖设备</span>
                                    <span style={{ color: 'red' }}>异常</span>
                                </div>
                                <div className="neirong">
                                    <span style={{ color: 'white',marginRight:'15px'}}>A3楼地暖设备</span>
                                    <span style={{ color: '#95F204' }}>正常</span>
                                </div>
                                <div className="neirong">
                                    <span style={{ color: 'white',marginRight:'15px'}}>A3楼地暖设备</span>
                                    <span style={{ color: '#95F204' }}>正常</span>
                                </div>
                                
                                

                            </div>

                        </div>
                    </div>

                </div>





            </div>

        </div>

    );

}

export default Park_equipment